<template>
	<el-form ref="form" class="condition" size="small" label-position="top" :model="conditonForm">
		<span class="logo opacity60">且</span>
		<div v-for="(item, index) in conditonForm.conditonAnd" :key="index" class="line-item">
			<span class="line"></span>
			<fieldItem :item="item" :key="index" :field="fieldsMap[item.businessId]">
				<template v-slot:default="{ currentItem, fieldConditions }">
					<el-select class="conditon-field" v-model="item.businessId" @change="changeField(index, item)">
						<template v-for="one in conditonFilter">
							<el-option :key="one.businessId" :value="one.businessId" :label="one.name">
							</el-option>
						</template>
					</el-select>
					<el-select class="margin-l-8 margin-r-8 conditon-field" v-model="currentItem.filterType" :disabled="!item.businessId" @change="filterTypeChange(currentItem)">
						<template v-for="one in fieldConditions">
							<el-option :key="one.value" :value="one.value" :label="one.label"> </el-option>
						</template>
					</el-select>
				</template>
				<template v-slot:right>
					<i class="V7_iconfont V7_iconV7tubiao-109 pointer margin-l-8" @click.stop="deleteCondition(index)"></i>
				</template>
			</fieldItem>
		</div>
		<div>
			<el-button icon="el-icon-plus iconfont-left" type="text" size="small" @click.stop="handleCommand" class="add button-text">添加条件</el-button>
		</div>
	</el-form>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
import Aselect from '../select/index.vue';
import { filterConditon, conditionE } from './filterData';
import { getOption, newRecursion } from './common';
import fieldItem from './fieldItem.vue';
import Vue1 from 'vue';
const fieldItemWap = Vue1.component('wrap', {
  functional: true,
  render (createElement, context: any) {
    const { item, field } = context.props;
    if (item.fieldType === 'associationField') {
      return createElement(fieldItem, {
        ...context.data,
        props: { item: item.sourceFilter, field: newRecursion(field) }
      });
    }
    return createElement(fieldItem, { ...context.data, props: context.props });
  }
});
@Component({
  name: 'conditionItem',
  components: {
    Aselect,
    fieldItem: fieldItemWap
  }
})
export default class extends Vue {
  @Prop(Array) public fieldsList!: any;
  @Prop(Array) public conditonAnd!: any;
  @Prop(Array) public conditonFilter!: any[];
  @Prop({ default: false }) public canDelete!: boolean;

  private filter = Object.freeze(filterConditon);
  // 数组转化位对象，方便取值
  get fieldsMap () {
    const obj = {};
    this.fieldsList.map((item) => {
      obj[item.businessId] = item;
    });
    return obj;
  }

  public get conditonForm () {
    return { conditonAnd: this.conditonAnd };
  }

  // 与范围相关的value值
  get rangeValue () {
    return [conditionE.inScope, conditionE.notInScope];
  }

  // 添加条件
  public handleCommand () {
    this.conditonAnd.push(getOption());
    this.$emit('change');
  }

  public changeField (index, currentItem) {
    const opt = getOption(
      this.fieldsList.find((field) => field.businessId === currentItem.businessId)
    );

    this.conditonAnd.splice(index, 1, opt);
  }

  public filterTypeChange (item) {
    if (this.rangeValue.includes(item.filterType)) {
      this.$set(item, 'maxFilterValue', item.fieldType === 'number' ? null : '');
      this.$set(item, 'minFilterValue', item.fieldType === 'number' ? null : '');
    } else {
      this.$set(item, 'filterValue', item.fieldType === 'number' ? null : '');
    }
  }

  // 删除条件
  public deleteCondition (index: number) {
    this.conditonAnd.splice(index, 1);
    if (!this.conditonAnd.length) {
      this.$emit('deleteItem');
    }
    this.$emit('change');
  }
}
</script>

<style lang="stylus" scoped>
.V7_iconV7tubiao-109 {
	line-height: 32px
	color: #B3B9C7
	margin-left: 12px
}
.condition {
	position relative
	&+.condition {
		padding-top 8px
	}
	/deep/.el-form-item__label {
		display flex
		padding-bottom 0 !important
		align-items center
		.icon {
			flex-grow 1
		}
	}
}
.logo {
	position absolute
	top calc(50% - 10px)
}
.line-item {
	position relative
	padding-left 20px
	.line {
		top 16px
		display flex
		align-items center
		left 0
		font-weight 600
		width 20px
		height calc(100% + 18px)
		position absolute
		border-right 1px solid rgba(0, 0, 0, 0.1)
	}
}
.iconshanchu1-xian {
	color #8c8c8c
	border-radius 4px
	padding 0 4px
	&:hover {
		background-color rgba(0, 0, 0, 0.08)
	}
}
.dipalay-item {
	display flex
	/deep/.el-form-item__label {
		width 100%
		padding-bottom 0
	}
}
.conditon-field {
	width 115px
	flex-shrink 0
	margin-right: 12px
}
.add {
	margin-left 36px
	position relative
	&:before {
		content ''
		position absolute
		display block
		left -16px
		top 50%
		height 1px
		width 16px
		background-color rgba(0, 0, 0, 0.1)
	}
}
</style>
